<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card" style="margin-top: 15px">
      <div style="margin-bottom: 15px; display: flex">
        <span>机型编号：</span>
        <el-input v-model="planeTypeId" size="mini" style="width: 200px; margin-right: 30px" placeholder="请输入内容">
        </el-input>
        <!-- <el-checkbox v-model="checked">未维护的机型</el-checkbox> -->
        <el-button type="primary" size="mini" @click="getflighttypelist" style="margin: 0 20px">搜索</el-button>
        <el-button type="primary" size="mini" @click="centerDialogadd">添加</el-button>
      </div>
      <!-- 用户列表区 -->
      <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" id="tableTop" :data="flighttypelists" border stripe>
        <el-table-column label="机型编号" prop="planeTypeId"></el-table-column>
        <el-table-column label="制造公司" prop="planeMaker"></el-table-column>
        <el-table-column label="机型类型" prop="planeTypeDesc"></el-table-column>
        <el-table-column label="机型介绍" prop="planeDesc" width="300"></el-table-column>
        <el-table-column label="乘坐人数" prop="planeCapacity"></el-table-column>
        <el-table-column label="机型图片" prop="planePic">
          <template slot-scope="scope">
            <img slot="reference" :src="scope.row.planePic" style="width: 55px; height: 55px" />
          </template>
        </el-table-column>
        <el-table-column label="最小座位数" prop="minSeat"></el-table-column>
        <el-table-column label="最大座位数" prop="maxSeat"></el-table-column>
        <el-table-column label="机型大小" prop="airlineType"></el-table-column>
        <el-table-column label="机型宽窄" prop="widthType"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button id="btnAudit" type="primary" size="mini" @click="delcomfig(scope.row)">删除</el-button>
            <el-button id="btnAudit" type="primary" size="mini" @click="modifyplant(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增弹窗 -->
    <el-dialog title="添加机型维护" :visible.sync="centerDialogVisible" :close-on-click-modal="false" width="60%" center>
      <el-form ref="addplanetype" :inline="true" :model="addplanetype" class="demo-form-inline" :rules="rules">
        <el-form-item label="	机型编号 ：" prop="planeTypeId">
          <el-input size="mini" v-model="addplanetype.planeTypeId" placeholder="机型编号"></el-input>
        </el-form-item>
        <el-form-item label="制造公司 ：" prop="planeMaker">
          <el-input size="mini" v-model="addplanetype.planeMaker" placeholder="制造公司"></el-input>
        </el-form-item>
        <el-form-item label="机型类型 ：" prop="planeTypeDesc">
          <el-input size="mini" v-model="addplanetype.planeTypeDesc" placeholder="机型类型"></el-input>
        </el-form-item>
        <el-form-item label="乘坐人数 ：" prop="planeCapacity">
          <el-input size="mini" v-model="addplanetype.planeCapacity" placeholder="乘坐人数"></el-input>
        </el-form-item>

        <el-form-item label="最小座位数 ：" prop="minSeat">
          <el-input size="mini" v-model="addplanetype.minSeat" placeholder="最小座位数"></el-input>
        </el-form-item>

        <el-form-item label="最大座位数 ：" prop="maxSeat">
          <el-input size="mini" v-model="addplanetype.maxSeat" placeholder="最大座位数"></el-input>
        </el-form-item>

        <el-form-item label="起飞城市 ：" prop="startCity">
          <el-select filterable size="mini" v-model="addplanetype.startCity" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item.airportCityName" :value="item.airportCityId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="到达城市 ：" prop="endCity">
          <el-select filterable size="mini" v-model="addplanetype.endCity" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item.airportCityName" :value="item.airportCityId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="航班号 ：" prop="flightNo">
          <el-input size="mini" v-model="addplanetype.flightNo" placeholder="航班号"></el-input>
        </el-form-item>

        <el-form-item label="起飞时间 ：">
          <el-date-picker size="mini" v-model="addplanetype.departureTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="机型名称 ：" prop="aircraftName">
          <el-input size="mini" v-model="addplanetype.aircraftName" placeholder="机型名称"></el-input>
        </el-form-item>

        <el-form-item label="机型大小 : " style="margin-right: 50px">
          <el-radio v-model="addplanetype.airlineType" label="大">大</el-radio>
          <el-radio v-model="addplanetype.airlineType" label="中">中</el-radio>
          <el-radio v-model="addplanetype.airlineType" label="小">小</el-radio>
        </el-form-item>
        <el-form-item label="宽窄类型 : " style="margin-right: 50px">
          <el-radio v-model="addplanetype.widthType" label="宽">宽</el-radio>
          <el-radio v-model="addplanetype.widthType" label="窄">窄</el-radio>
        </el-form-item>

        <el-form-item label="图片上传 ：">
          <el-upload  :data="multipartFile" :action="imgHttpAllUrl" :headers="header" list-type="picture-card"
            :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="机型介绍 ：" prop="planeDesc">
          <el-input style="width: 400px" :autosize="{ minRows: 6 }" type="textarea" v-model="addplanetype.planeDesc"
            placeholder="联系信息"></el-input>
        </el-form-item>
        <div>
          <el-form-item>
            <el-button @click="resetForm('addplanetype')">取 消</el-button>
            <el-button type="primary" @click="determineplant('addplanetype')">确 定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
    <!-- 确认删除 -->
    <el-dialog title="提示" :visible.sync="comfigdelDialogVisible" :close-on-click-modal="false" width="30%" center>
      <span>确认删除此条数据吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="comfigdelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getremoveflighttype()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgHttpAllUrl: this.$imgHttpAllUrl,
        multipartFile: { type: "flightMachineType" },
        header: {
          token: document.cookie.split("; ")[0].split("=")[1],
        },
        is: false,
        // 图片上传
        dialogImageUrl: "",

        // 机型编号
        planeTypeId: "",
        format: "yyyy-MM-dd",

        // 表单验证规则
        rules: {
          planeTypeId: [{
            required: true,
            message: "请输入机型编号",
            trigger: "blur"
          }, ],
          planeMaker: [{
            required: true,
            message: "请输入制造公司",
            trigger: "blur"
          }, ],
          planeTypeDesc: [{
            required: true,
            message: "请输入机型类型",
            trigger: "blur"
          }, ],
          planeCapacity: [{
            required: true,
            message: "请输入乘坐人数",
            trigger: "blur"
          }, ],
          minSeat: [{
            required: true,
            message: "请输入最小座位号",
            trigger: "blur"
          }, ],
          maxSeat: [{
            required: true,
            message: "请输入最大座位号",
            trigger: "blur"
          }, ],
          // startCity: [{
          //   required: true,
          //   message: "请选择起飞城市",
          //   trigger: "change"
          // }, ],
          // endCity: [{
          //   required: true,
          //   message: "请选择到达城市",
          //   trigger: "change"
          // }, ],
          // flightNo: [{
          //   required: true,
          //   message: "请输入航班号",
          //   trigger: "blur"
          // }],

          aircraftName: [{
            required: true,
            message: "请输入机型名称",
            trigger: "blur"
          }, ],
          planeDesc: [{
            required: true,
            message: "请输入机型名称",
            trigger: "blur"
          }, ],
        },
        checked: "",

        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,

        // 弹窗显示
        centerDialogVisible: false,
        comfigdelDialogVisible: false,

        // 添加机型
        addplanetype: {
          planeTypeId: "", //机型编号 1
          planeMaker: "", //制造公司 1
          planeTypeDesc: "", //机型类型 1
          planeCapacity: "", //乘坐人数 1
          minSeat: "", //最小座位号 1
          airlineType: "", //机型大小 1
          widthType: "", //宽窄类型 1
          maxSeat: "", //最大座位号 1
          startCity: "", //起飞城市 1
          endCity: "", //到达城市 1
          flightNo: "", //航班号 1
          departureTime: "", //起飞时间 1
          aircraftName: "", //机型名称 1
          planeDesc: "", //联系信息 1
          planePic: "", //  tupian 1
          id: ""
        },
        input: "",
        // 机型列表
        flighttypelists: [],
        // 城市下拉列表数据
        cityList: [],
        // 删除主键
        delid: "",
      };
    },

    methods: {
      // 新增按钮
      centerDialogadd() {
        this.addplanetype = {}
        this.dialogImageUrl = ''
        // let form = this.addplanetype
        // Object.keys(form).forEach(key => (form[key] = ''));
        this.centerDialogVisible = true
        this.is = true
        // this.getflighttypelist() 
      },
      handleAvatarSuccess(response) {
        this.addplanetype.planePic = response.data[0]
      },
      // 新增保存按钮
      determineplant(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // console.log(this.addplanetype)
            // debugger
            if (this.is == true) {
              this.getaddinsert(formName);
            } else {
              this.getupdatetype(formName)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      // 修改
      modifyplant(row) {
        this.is = false;
        this.addplanetype = row;
        this.centerDialogVisible = true;
      },
      // 重置修改弹窗
      resetForm(formName) {
        this.centerDialogVisible = false;
        this.getflighttypelist();
        this.$refs[formName].resetFields();
      },
      // 文件上传
      // 上传图片
      handlePictureCardPreview(file) {
        console.log(file)
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //分页
      handleSizeChange(value) {
        this.pageSize = value;
        this.getflighttypelist();
      },
      handleCurrentChange(value) {
        this.currentPage = value;
        this.getflighttypelist();
        // orders = res.data;
      },
      // 确认删除事件
      delcomfig(row) {
        this.comfigdelDialogVisible = true;
        console.log(row);
        this.delid = row.id;
      },
      // 机型列表接口
      getflighttypelist() {
        this.$axios.getflighttypelist({
          pageNo: this.currentPage, // 当前页
          pageSize: this.pageSize, // 当前条
          planeTypeId: this.planeTypeId, //机型编号
        }).then((res) => {
          if (res.code == "00000") {
            this.flighttypelists = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
      },
      // 添加机型接口
      getaddinsert() {
        if (this.addplanetype.planeTypeId != "") {
          this.$axios
            .getaddinsert({
              planeTypeId: this.addplanetype.planeTypeId, //机型编号
              planeMaker: this.addplanetype.planeMaker, //制造公司
              planeTypeDesc: this.addplanetype.planeTypeDesc, //机型类型
              planeCapacity: this.addplanetype.planeCapacity, //乘坐人数
              minSeat: this.addplanetype.minSeat, //最小座位号
              airlineType: this.addplanetype.airlineType, //机型大小
              widthType: this.addplanetype.widthType, //宽窄类型
              maxSeat: this.addplanetype.maxSeat, //最大座位号
              startCity: this.addplanetype.startCity, //起飞城市
              endCity: this.addplanetype.endCity, //到达城市
              flightNo: this.addplanetype.flightNo, //航班号
              departureTime: this.addplanetype.departureTime, //起飞时间
              aircraftName: this.addplanetype.aircraftName, //机型名称
              planeDesc: this.addplanetype.planeDesc, //联系信息
              planePic: this.addplanetype.planePic
            })
            .then((res) => {
              console.log(res);
              if (res.code == "00000") {
                this.centerDialogVisible = false;
                this.getflighttypelist();
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
            });
        } else {
          this.$message.error("请填写机型编码");
        }
      },
      // 修改
      getupdatetype(formName) {
        if (this.addplanetype.planeTypeId != "") {
          this.$axios
            .getupdatetype({
              id: this.addplanetype.id, //机型编号

              planeTypeId: this.addplanetype.planeTypeId, //机型编号
              planeMaker: this.addplanetype.planeMaker, //制造公司
              planeTypeDesc: this.addplanetype.planeTypeDesc, //机型类型
              planeCapacity: this.addplanetype.planeCapacity, //乘坐人数
              minSeat: this.addplanetype.minSeat, //最小座位号
              airlineType: this.addplanetype.airlineType, //机型大小
              widthType: this.addplanetype.widthType, //宽窄类型
              maxSeat: this.addplanetype.maxSeat, //最大座位号
              startCity: this.addplanetype.startCity, //起飞城市
              endCity: this.addplanetype.endCity, //到达城市
              flightNo: this.addplanetype.flightNo, //航班号
              departureTime: this.addplanetype.departureTime, //起飞时间
              aircraftName: this.addplanetype.aircraftName, //机型名称
              planeDesc: this.addplanetype.planeDesc, //联系信息
              planePic:   this.addplanetype.planePic
            })
            .then((res) => {
              this.$refs[formName].resetFields();
              console.log(res);
              if (res.code == "00000") {
                this.centerDialogVisible = false;
                this.getflighttypelist();
                this.addplanetype = ""
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            });

        } else {
          this.$message.error("请填写机型编码");
        }
      },
      // 城市列表
      getaddinsertselectCityList() {
        this.$axios.getaddinsertselectCityList({}).then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.cityList = res.data;
          }
        });
      },
      // 删除
      getremoveflighttype() {
        this.$axios.getremoveflighttype({
          id: this.delid
        }).then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.comfigdelDialogVisible = false
            this.getflighttypelist();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
        });
      },
    },

    mounted() {
      // 机型列表
      this.getflighttypelist();
      // 城市列表
      this.getaddinsertselectCityList();
    },
  };
</script>
<style scoped>
  el-table-column {
    background-color: #f2f2f2;
  }

  #searchBtn {
    background-color: #54dac9;
    color: #fff;
  }
</style>